<template>
  <div>
    <TopNav title="我的跟帖" />
    <div class="list">
      <div class="item" v-for="comment in commentList" :key="comment.id">
        <div class="date">2019-10-10</div>
        <div class="sonConent" v-if="comment.parent">
          <div class="info">
            回复:
            {{ comment.parent.user.nickname || comment.parent.user.username }}
          </div>
          <div class="sonConentText">{{ comment.parent.content }}</div>
        </div>
        <div class="mainContent">{{ comment.content }}</div>
        <div
          class="original"
          v-if="comment.post"
          @click="$router.push('/details/' + comment.post.id)"
        >
          <div class="text">原文 : {{ comment.post.title }}</div>
          <span class="iconfont iconjiantou1"></span>
        </div>
        <div class="original" v-else @click="$toast('改帖子已删除')">
          <div class="text">原文 : 该帖子已删除</div>
          <span class="iconfont iconjiantou1"></span>
        </div>
      </div>
    </div>
    <div class="moreComment">
      更多跟帖<span class="iconfont iconjiantou1"></span
      ><span class="iconfont iconjiantou1"></span>
    </div>
  </div>
</template>

<script>
import TopNav from "@/components/TopNav";
export default {
  components: { TopNav },
  data() {
    return {
      commentList: [],
    };
  },
  created() {
    this.$axios({
      url: "/user_comments",
    }).then((res) => {
      console.log(res.data.data);
      this.commentList = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.list {
  .item {
    padding: 10 / 360 * 100vw 20 / 360 * 100vw;
    font-size: 12 / 360 * 100vw;
    color: #888;
    border-bottom: 1px solid #ccc;
    .sonConent {
      background-color: #e4e4e4;
      padding: 10 / 360 * 100vw;
      margin: 10 / 360 * 100vw 0;
      .info {
        margin-bottom: 10 / 360 * 100vw;
      }
    }
    .mainContent {
      margin: 10 / 360 * 100vw 0;
      color: #000;
    }
    .original {
      display: flex;
      justify-content: space-between;

      .text {
        width: 80%;
        //  文字显示不开，是否开启换行   nowrap：不换行
        white-space: nowrap;
        // "/* 2. 超出的隐藏 */",
        overflow: hidden;
        // "/* 3. 文字溢出的时候，用省略号显示 */",
        text-overflow: ellipsis;
      }
      .iconjiantou1 {
        font-size: 12 / 360 * 100vw;
        margin-right: 20 / 360 * 100vw;
      }
    }
  }
}
.moreComment {
  width: 100%;
  text-align: center;
  margin-top: 20 / 360 * 100vw;
  font-size: 12 / 360 * 100vw;
  color: #888;

  .iconfont:first-child {
    margin-right: -10 / 360 * 100vw;
    margin-left: 5 / 360 * 100vw;
  }
}
</style>